import React, { useState } from 'react'

export default function App() {
    let [todos, setTodos] = useState([
        {
            id: 1,
            title: '吃饭',
            isDone: false
        },
        {
            id: 2,
            title: '睡觉',
            isDone: false
        },
        {
            id: 3,
            title: '打豆豆',
            isDone: false
        },
    ])
    return (
        <>
            <p><button onClick={() => {
                setTodos(
                    [
                        {
                            id: Math.random().toString(36).slice(2),
                            title: '前',
                            isDone: false
                        },
                        ...todos
                    ])
            }}>先前追加</button></p>
            <p><button onClick={() => {
                setTodos(
                    [
                        ...todos,
                        {
                            id: Math.random().toString(36).slice(2),
                            title: '后',
                            isDone: false
                        }
                    ])
            }}>先后追加</button></p>
            <ul>
                {todos.map((todo,index) => (
                    <li key={todo.id}>
                        <p>title: {todo.title} - {index} <input type="text" name="" id="" /></p>
                    </li>
                ))}
            </ul>
        </>

    )
}
